<template>
    <!-- search -->
    <div id='search'>
        <a href=""><img src="@/assets/imgs/TB1R5fsgyDsXe8jSZR0XXXK6FXa-281-80.jpg" alt=""></a>
        <div>
            <form>
            <input type="text" name="" value="" placeHolder='女装'>
            <input type="button" value='搜索'/>
        </form>
        <p class='clear'>
            <a :href="navData.href" v-for='(navData,i) in navDatas' :key='i'>{{navData.title}}</a>
        </p>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        navDatas:Array
    }
}
</script>
<style>
    /* search */
    #search div{
        width: 687px;
        height: 42px;
        border: 2px solid #f03726;
        display: inline-block;
    }
    #search form input[type='button']{
        width: 95px;
        height: 42px;
        box-sizing: content-box;
        border: none;
        background: #f03726;
        color: #fff;
        float: right;
    }
    #search form input[type='text']{
        height: 25px;
        border: none;
        padding: 5px 10px;
        margin-top: 3px;
        box-sizing: content-box;
        width: calc(100% - 130px);
        float: left;
        outline: none;
    }
    #search a{
        vertical-align: middle;
    }

    #search p{
        text-align: left;
    }
</style>
